<template>
    <el-dialog :title="btntype == 0 ? '添加' : '编辑'" :visible.sync="dialogVisible" width="35%" :before-close="handleClose"
        class="box">

        <!-- 表单 -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="人员编号：" prop="user">
                <el-input v-model="ruleForm.user"></el-input>
            </el-form-item>

            <el-form-item label="姓名：" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="所属角色：" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择类型">
                    <el-option label="请选择" value="" checked></el-option>
                    <el-option label="管理员" :value="0"></el-option>
                    <el-option label="街道负责人" :value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="说明：" prop="explain">
                <el-select v-model="ruleForm.explain" placeholder="请选择类型">
                    <el-option label="请选择" value="" checked></el-option>
                    <el-option label="该账号拥有权限" :value="0"></el-option>
                    <el-option label="请上传车位信息" :value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="是否有效：" prop="valid">
                <el-select v-model="ruleForm.valid" placeholder="请选择类型">
                    <el-option label="请选择" value="" checked></el-option>
                    <el-option label="是" :value="0"></el-option>
                    <el-option label="否" :value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-form>


        <span slot="footer" class="dialog-footer">
            <el-button @click="closedialogfun">取 消</el-button>
            <!-- <el-button type="primary" @click="submit">提 交</el-button> -->
            <el-button :plain='true' type="primary" @click="submitForm('ruleForm')">提 交</el-button>
        </span>


    </el-dialog>
</template>

<script>
import { addOneApi, updateAlterApi } from '../api/homeApi'
export default {
    props: ['id', 'btntype'],

    data() {
        var validateMyname = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('姓名不能为空，请从新输入'))
            } else if (value.length < 2) {
                callback(new Error('请输入完整姓名'))
            } else {
                callback()
            }
        }

        var validateMyuser = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('编号不能为空，请从新输入'))
            } else if (value.length < 7) {
                callback(new Error('人员编号为8位数，请输入正确编号'))
            } else {
                callback()
            }
        }

        return {
            dialogVisible: true,//控制弹框的显示和隐藏
            ruleForm: {
                id: '',
                name: '',//双向绑定的一个属性
                user: '',
                type: '',// rolesType 管理员街道负责人
                explain: '',// explainType
                valid: ''// type  0  1
            },
            rules: {//对应属性的验证规则  ，prop才是对应的
                name: [
                    { validator: validateMyname, trigger: 'blur' }
                ],
                user: [
                    { validator: validateMyuser, trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
                explain: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
                valid: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
            }
        };
    },
    mounted() {
        // console.log(this.id, "--------id")
        this.ruleForm.id = this.id.id
        this.ruleForm.name = this.id.name
        this.ruleForm.valid = this.id.type
        this.ruleForm.explain = this.id.explainType
        this.ruleForm.type = this.id.rolesType
        this.ruleForm.user = this.id.StaffNo
        // console.log(this.ruleForm, "--------ruleForm")
        // console.log('this.ruleForm', this.ruleForm);
    },


    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //验证通过，获取表单的值给后端发请求并执行，前端添加完成，刷新表格，弹窗消失
                    if (this.btntype == 0) {
                        addOneApi(this.ruleForm).then(res => {//添加
                            // console.log('res', res);
                            if (res.code == 200) {
                                this.$emit('resetTable')//刷新表格
                                this.$emit("parentclose")//关闭弹窗
                                this.$message({
                                    message: '个人信息已添加成功，请在最后页查看',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error('请输入正确人员信息');
                                return false;
                            }
                        })
                    } else {//编辑，获取form的值,修改，刷新
                        updateAlterApi(this.ruleForm).then(res => {
                            // console.log('res', res);
                            this.$emit('resetTable')//刷新表格
                            this.$emit("parentclose")//关闭弹窗
                            this.$message({
                                message: '个人信息已修改成功，请查看！',
                                type: 'success'
                            });
                        })
                    }

                    // 消息提示


                }
            });
        },



        handleClose(done) {
            this.$confirm('确认关闭？')
                // this.dialogVisible = true
                .then(_ => {
                    done();
                    this.closedialogfun()
                })
                .catch(_ => { });
        },

        closedialogfun() {
            this.$emit("parentclose")

        },

        submit() {
            // 处理提交逻辑
            // 处理完成之后emit
            // this.closedialogfun()
        }

    }
};
</script>

<style lang="less" scoped>
</style>